/**
 * Created by oiuyt on 2018/7/18.
 */
import React, { Component } from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {items: ['hello', 'world', 'click', 'me']};
        this.handleAdd = this.handleAdd.bind(this);
    }

    handleAdd() {
        const newItems = this.state.items.concat([
            prompt('Enter some text')
        ]);
        this.setState({items: newItems});
    }

    handleRemove(i) {
        let newItems = this.state.items.slice();
        newItems.splice(i, 1);
        this.setState({items: newItems});
    }

    render() {
        const items = this.state.items.map((item, i) => (
            <div key={item} onClick={() => this.handleRemove(i)}>
                {item}
            </div>
        ));

        return (
            <div>
                <button onClick={this.handleAdd}>Add Item</button>
                <div>

                    {items}

            <pre>
                        1、exact
exact是Route下的一条属性，一般而言，react路由会匹配所有匹配到的路由组价，exact能够使得路由的匹配更严格一些。

exact的值为bool型，为true是表示严格匹配，为false时为正常匹配。

如在exact为true时，’/link’与’/’是不匹配的，但是在false的情况下它们又是匹配的。

一个常用的场景是这样的：

Route path='/' component=Home
Route path='/page' component=Page
                    这种情况下，如果匹配路由path='/page'，那么会把Home也会展示出来。
                    </pre>
                </div>
            </div>
        );

    }

}

export default Home
